<link href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css" rel="stylesheet">
<style>
.weui-media-box__desc {
    color: #999;
    font-size: 13px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}</style>
<div class="page__bd">
    <form id="form">
        <div class="weui-cells__title">发票信息</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">开票金额</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="money" type="number"  placeholder="请输入开票金额">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">发票抬头</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="head" type="text"  placeholder="请输入发票抬头">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">发票税号</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="tax_id" type="number"  placeholder="请输入发票税号">
                </div>
            </div>
            <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label">发票类型</label>
                </div>
                <div class="weui-cell__bd">
                    <select class="weui-select" name="type">
                        <option value="1">普通发票</option>
                        <option value="2">增值发票</option>
                    </select>
                </div>
            </div>

        </div>
        <div class="weui-cells__title">邮寄地址</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="realname" type="text"  placeholder="请输入姓名">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="mobile" type="number"  placeholder="请输入手机号">
                </div>
            </div>
            <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label">省</label>
                </div>
                <div class="weui-cell__bd">
                    <select class="weui-select" id="province" name="province">
                    </select>
                </div>
            </div>
            <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label">市</label>
                </div>
                <div class="weui-cell__bd">
                    <select class="weui-select" id="city" name="city">
                    </select>
                </div>
            </div>
            <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label">区</label>
                </div>
                <div class="weui-cell__bd">
                    <select class="weui-select" id="county" name="county">
                    </select>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" name="address" placeholder="请输入详细地址" rows="3"></textarea>
                    <div class="weui-textarea-counter"></div>
                </div>
            </div>
        </div>
    </form>
    <label for="weuiAgree" class="weui-agree">
        <span class="weui-agree__text">
            <!--发票邮寄方式为顺丰到付-->
        </span>
    </label>
    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" onclick="AjaxFormSubmit()" id="showTooltips">确定</a>
    </div>
    
    <div id="app" class="weui-panel weui-panel_access">
        <div class="weui-panel__hd">已开票金额:{{all}}</div>
        <div class="weui-panel__bd">
            <template v-for="item in list">
                <div class="weui-media-box weui-media-box_text">
                    <h4 class="weui-media-box__title">金额:{{item.money}}</h4>
                    <p class="weui-media-box__desc">
                        抬头:{{item.head}} 税号:{{item.tax_id}} 类型:{{item.type==1?'普通票':'增值票'}}<br>
                        地址:{{item.province}}{{item.city}}{{item.county}}{{item.address}}<br>
                        <span v-if="item.express">快递:{{item.express}} 单号:{{item.express_no}}</span>
                    </p>
                </div>
            </template>
        </div>
        <div v-if="page>0" class="weui-panel__ft">
            <a @click="getMore()" class="weui-cell weui-cell_access weui-cell_link">
                <div class="weui-cell__bd">查看更多{{page}}</div>
                <span class="weui-cell__ft"></span>
            </a>    
        </div>
    </div>
</div>

<script src="__STATIC__mobile/js/areadata.js"></script>
<script src="__STATIC__mobile/js/myarea.js"></script>
<script src="__STATIC__mobile/js/expressdata.js?5555"></script>
<script type="text/javascript">
city.getcity('province','city','county','','','',1);
</script>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
    el: '#app',
    data: {
        list: [],
        page: 1,
        all: 0
    },
    created: function () {
        this.getMore();
    },
    methods: {
        getMore: function () {
            var self = this;
            $.get('/mobile/fapiao/getfapiao?page='+this.page)
            .then(function(res){
                self.all = res.data.all;
                if(res.data.list.length<10) {
                    self.page = 0;
                }else{
                    self.page++;
                }
                for(var i=0;i<res.data.list.length;i++) {
                    self.list.push(res.data.list[i]);
                }
            })
        }
    }
});
</script>